<template>
  <div class="pages-wrap">
    <!-- 当前的分类页面 -->
    <div class="full-page">
      <app-header></app-header>
      <div class="lesstime">
        支付剩余时间<van-count-down
          class="lesstime2"
          style="display: inline"
          :time="time"
          format="mm:ss"
          @finish="finish"
        />
      </div>
      <div class="money">
        <span>￥{{totalPrice? totalPrice : 0}}</span>
      </div>
      <div class="detail">
        <p>
          <span>豪华休闲房fdfdfdf限上午ee点后入住，晚上18点前退</span>
          <i class="iconfont icon-youjiantou" @click="showPopup"></i>
        </p>
      </div>
      <div class="info">
        <div class="row1 border-bottom">
          <div>
            <img
              src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E7%A1%AE%E8%AE%A4%E8%AE%A2%E5%8D%95/u1136.png"
              alt=""
            />
            <span>微信支付</span>
          </div>

          <input class="radio_type" type="radio" name="type" id="radio2" />
        </div>
        <div class="row1 border-bottom">
          <div>
            <img
              src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E7%A1%AE%E8%AE%A4%E8%AE%A2%E5%8D%95/u1137.png"
              alt=""
            />
            <span>支付宝支付</span>
          </div>

          <input class="radio_type" type="radio" name="type" id="radio2" />
        </div>
        <div class="row1 border-bottom">
          <div>
            <img
              src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E7%A1%AE%E8%AE%A4%E8%AE%A2%E5%8D%95/u1143.png"
              alt=""
            />
            <span>微信支付</span>
          </div>

          <input class="radio_type" type="radio" name="type" id="radio2" />
        </div>
        <div class="row1 border-bottom">
          <div>
            <img
              src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E7%A1%AE%E8%AE%A4%E8%AE%A2%E5%8D%95/u1139.png"
              alt=""
            />
            <span>微信支付</span>
          </div>

          <input class="radio_type" type="radio" name="type" id="radio2" />
        </div>
      </div>
      <div class="pay">
        <span @click="btnAction">确认支付</span>
      </div>
    </div>
    <van-popup
      v-model="show"
      class="zhong"
       close-icon="close"
      :style="{ height: '525px', width: '335px' }"
      >内hfruhfuerfhuerfnui容</van-popup>
    
      <!-- 支付金额页面 -->
    <transition enter-active-class="slideIn" leave-active-class="slideOut">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Popup } from "vant";
import { mapState } from "vuex";

export default {
  name: "payment-page",
  components: {
    [Popup.name]: Popup,
  },
  data() {
    return {
      // time: 30 * 60 * 1000,
      time: 30 * 1000,
      show: false,
    };
  },
  created() {},
  computed: {
    ...mapState("hotelOrder", ["totalPrice"]),
  },
  methods: {
    finish() {
      Toast("支付超时");
      this.$router.back();
    },
    showPopup() {
      this.show = true;
    },
    btnAction(){
      this.$store.dispatch("hotelOrder/changeOrderState",{orederstate:1})
      this.$router.push({name:'paymentdetail'})
    },

  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
.full-page {
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 106;
  padding-top: vw(60);
  background-color: #fff;

  .app-header {
    background-color: #fff;
    ::v-deep .title {
      color: #f66;
    }
    ::v-deep .header-btn {
      color: #f66;
    }
    ::v-deep .iconfont {
      color: #f66;
    }
  }


  .lesstime {

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: vw(15);
    color: #666;
    margin-top: vw(10);
    .lesstime2 {
      margin-left: vw(3);
      font-size: vw(15);
      color: #666;
      letter-spacing: vw(1);
    }
  }
  .money {
    display: flex;
    justify-content: center;
    font-size: vw(28);
    color: #f00;
    margin: vw(20) 0;
  }
  .detail {
    width: vw(339);
    margin-bottom: vw(10);
    p {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 0 vw(20);
      font-size: vw(13);
      color: #666;
      span {
        width: vw(295);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .iconfont {
        width: vw(20);
        font-weight: bold;
        font-size: vw(16);
      }
    }
  }
  .info {
    background: #fff;
    height: vw(351);
    margin-left: vw(20);
    display: flex;
    margin-bottom: vw(100);

    flex-direction: column;
    .row1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-basis: 25%;
      div {
        img {
          width: vw(34);
          min-height: vw(30);
          margin-left: vw(20);
          margin-right: vw(10);
        }
        display: flex;
        align-items: center;
      }

      .radio_type {
        width: 20px;
        height: 20px;
        appearance: none;
        position: relative;
        margin-right: vw(20);
      }
      .radio_type:before {
        content: "";
        width: 20px;
        height: 20px;
        border: 2px solid #ccc; //可以再这里更改按钮边框的颜色
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
      }
      .radio_type:checked:before {
        content: "";
        width: 20px;
        height: 20px;
        border: 2px solid #ccc; //可以在这里颜色
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
      }
      .radio_type:checked:after {
        content: "";
        width: 12px;
        height: 12px;
        text-align: center;
        background: #469bea; //可以在这里更改颜色
        border-radius: 50%;
        display: block;
        position: absolute;
        top:5.5px;
        left:5.5px;
      }
    }
  }
  .pay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: vw(72);
    // bottom: 0;
    span {
      display: flex;
      color: #fff;
      height: 100%;
      font-size: vw(18);
      justify-content: center;
      align-items: center;
      width: vw(345);
    }

    height: vw(44);
    background: #3d81fd;
  }
  .zhong {
    margin: 0 auto;
  }
}
</style>
